<template>
    <div id="list">

        <div style="width: 100%;height: 96px;position: relative">
            <van-nav-bar :title="$route.query.title"
                         left-arrow
                         @click-left="onClickLeft"
                         fixed/>

            <div style="position: fixed;top: 46px;z-index: 999;width: 100%">
                <van-dropdown-menu active-color="#69D7CC">
                    <van-dropdown-item :title="citytitle" ref="cityid">
                        <van-tree-select
                                :items="items"
                                :main-active-index="mainActiveIndex"
                                :active-id="activeId"
                                @navclick="onNavClick"
                                @itemclick="onItemClick">
                        </van-tree-select>
                    </van-dropdown-item>


                    <van-dropdown-item :title="citytitle">

                    </van-dropdown-item>


                    <van-dropdown-item title="智能排序">
                        <van-cell :title="item.name" v-for="(item,i) in sortlist" :clickable="true"/>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </div>


        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading"
                      :finished="finished"
                      finished-text="没有更多了"
                      @load="onLoad">


                <router-link v-for="item in list"
                    class="list-contant"
                    :key="item"
                    tag="li"
                    to="/detail">
                    <img src="https://img2.soyoung.com/post/20190429/3/078cae6c9c3e43127d8ceb4cd4dc3f34.png" alt="">
                    <div class="list-contant-right">
                        <span class="title">
                        【埋线提升】韩国美迪塑-全脸小线根数不限①埋线提升面部线雕②伤口隐形③堪比超声刀#热玛吉
                        </span>
                        <div>
                            <span class="price">
                                ￥9800
                            </span>
                            <span class="black-card">
                                ￥9506
                            </span>
                        </div>

                    </div>

                </router-link>


            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import axios from 'axios'
    import mock from '../mock'
    import Vue from 'vue';

    export default {
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                count: 0,
                isLoading: false,
                value2: 'a',
                citytitle: "全国地区",
                items: [
                    {
                        // 导航名称
                        text: '所有城市',
                        // 该导航下所有的可选项
                        children: [
                            {
                                // 名称
                                text: '温州',
                                // id，作为匹配选中状态的标识
                                id: 1,
                                // 禁用选项

                            },
                            {
                                text: '杭州',
                                id: 2
                            }
                        ]
                    }
                ],
                // 左侧高亮元素的index
                mainActiveIndex: 0,
                // 被选中元素的id
                activeId: 1,
                sortlist: [{
                    name: "智能排序"
                }, {
                    name: "销量最多"
                }, {
                    name: "案例最多"
                }, {
                    name: "评分最高"
                }, {
                    name: "离我最近"
                }, {
                    name: "最新上架"
                }, {
                    name: "价格最低"
                }, {
                    name: "价格最高"
                }]
            };
        },

        methods: {
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.list.length >= 30) {
                        this.finished = true;
                    } else {
                        this.finished = false
                    }
                }, 500);
            },
            onRefresh() {
                setTimeout(() => {
                    this.$toast('刷新成功');
                    this.isLoading = false;
                    this.list = []
                    for (let i = 0; i < 15; i++) {
                        this.list.push(this.list.length + 1);
                    }
                }, 500);
            },
            onClickLeft() {
                this.$router.push('/')
            },
            onNavClick(index) {
                this.mainActiveIndex = index;
            },
            onItemClick(data) {
                this.activeId = data.id;
                this.citytitle = this.items[0].children[this.activeId - 1].text
                this.onConfirm()
            },
            onConfirm() {
                this.$refs.cityid.toggle(false)
            }
        },
        mounted() {
        }
    }
</script>

<style scoped lang="scss">
    #list {
        max-width: 650px;
        margin: 0 auto;
        position: relative;
    }

    .list-contant {
        width: 100%;
        padding: 10px 10px;
        box-sizing: border-box;
        position: relative;

        img {
            width: 80px;
        }
    }

    .van-tree-select__nav-item--active {
        border-color: #87DFD6;
    }

    .van-tree-select__item--active {
        color: #87DFD6;
    }

    .van-tree-select__nav {
        background-color: #F5F5F5;
    }

    .van-tree-select {
        color: #777;
    }

    body {
        .van-icon-arrow-left:before {
            font-size: 20px;
            color: #72DACF;
        }

        .van-tree-select__nav-item--active {
            font-weight: normal;
        }

        .van-tree-select__item {
            font-weight: normal;
        }
    }

    .list-contant {
        display: flex;
        font-size: 14px;
        padding: 10px;
        box-sizing: border-box;

        li span {
            display: block;
            overflow: hidden;
        }
    }

    .list-contant-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;

        .title {
            display: block;
            height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .price {
            color: #FF5481;
        }

        .black-card {
            color: #DBB276;
        }
    }
</style>